<template>
	<view class="p-t-44">
		<view class="districtHz m-0-a">
			<view class="dis-f he_nr lh" v-if="type == 2">
				<view>社区名称</view>
				<input v-model="data.name" class="m-l-10" />
			</view>
			<view class="dis-f he_nr lh">
				<view>手机号码</view>
				<input v-model="data.phone" class="m-l-10" />
			</view>
			<view class="dis-f he_nr lh" @click="shengfen">
				<view style="">所在省份</view>
				<input disabled placeholder="请选择省" v-model="region1.name" class="m-l-10" />
			</view>
			<view class="dis-f he_nr lh" @click="shiqu">
				<view style="">所在市区</view>
				<input disabled placeholder="请选择市" v-model="region2.name" class="m-l-10" />
			</view>
			<view class="dis-f he_nr lh" @click="showRegion3 = true">
				<view style="">所在地区</view>
				<input disabled placeholder="请选择区" v-model="region3.name" class="m-l-10" />
			</view>
			<view class="dis-f he_nr hit" v-if="type == 2">
				<view>
					<view>详细地址</view>
					<input type="text" placeholder="如街道  门牌号  小区  楼栋号  单元室等" v-model="data.detail_address" />
				</view>
				<!-- 	<view class="weiz">
					<image src="@/bundle/static/images/weizhi.png" class="image"></image>
					<view>位置</view>
				</view> -->
			</view>
			<view class="license dis-f bbt" v-if="type == 1">
				<view>营业执照</view>
				<view>
					<view class="z" @click="shenfenz(3)">
						<image :src="zz" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="license dis-f ">
				<view>身份证照</view>
				<view>
					<view class="f" @click="shenfenz(1)">
						<image :src="sfz_z" mode="widthFix"></image>
					</view>
					<view class="f m-t-20" @click="shenfenz(2)">
						<image :src="sfz_f" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-picker v-model="showRegion" :confirm-color="themeColor" cancel-color="#999" mode="region" :columns="columns"
			@confirm="regionChange">
		</u-picker> -->
		<u-picker v-model="showRegion1" :columns="columns1"  mode="selector" :range="columns1" range-key="name" @confirm="changeEconomize"></u-picker>
		<u-picker v-model="showRegion2" :columns="columns2"  mode="selector" :range="columns2" range-key="name" @confirm="changeMarket"></u-picker>
		<u-picker v-model="showRegion3" :columns="columns3"  mode="selector" :range="columns3" range-key="name" @confirm="changeDistinguish"></u-picker>
		<view class=" m-0-a affirm " @click="submit">确认</view>
	</view>
</template>

<script>
	import {
		apiDistributionApply1,
		apiGetAreaList,
		apiUserCentre,
		apipostThirdList
	} from '@/api/user';
	import {
		uploadFile
	} from '@/utils/tools.js'
	export default {
		data() {
			return {
				data: {
					region: '',
					phone: null,
					name: '',
					province_id: 0,
					city_id: 0,
					district_id: 0,
					detail_address: '',
					idcard_just: '',
					idcard_back: '',
					business_license: '',
				},
				type: 1,
				sfz_z: '/bundle/static/images/sfz_z.png',
				sfz_f: '/bundle/static/images/sfz_f.png',
				zz: '/bundle/static/images/tp1.png',
				remark: '申请',
				showRegion: false,
				showRegion1:false,
				showRegion2:false,
				showRegion3:false,
				showRegion4:false,
				columns1:[],
				columns2:[],
				columns3:[],
				columns4:[],
				region1: {},
				region2: {},
				region3: {},
				region4: {},
			}
		},
		onLoad(e) {
			apiUserCentre().then((res) => {
				console.log(666666, res);
				if (res.distribut_apply) {
					let title = "";
					if (res.destrict_distribut_apply.type == 1) {
						title = "区县代理"
					}
					if( res.community_distribut_apply.type == 2 ) {
						title = "社区代理"
					}

					if (res.community_distribut_apply.status > 0 ) {
						if (res.community_distribut_apply.status == 1) {
							this.$toast({
								title: '您提交的：' + title + '，已经申请，请等待管理员审核'
							}, {
								tab: 1,
								url:'/pages/index/index',
							})
						} else if (res.community_distribut_apply.status == 2) {
							this.$toast({
								title: '您已经是' + title + '了，无需再次申请'
							}, {
								tab: 1,
								url:'/pages/index/index',
							})
						} else if (res.community_distribut_apply.status == 3) {
							this.$toast({
								title: '您提交的：' + title + '，已经申请，请等待管理员审核'
							}, {
								tab: 1,
								url:'/pages/index/index',
							})
						} else if (res.community_distribut_apply.status == 4) {
							this.$toast({
								title: '您上次提交的：' + title + '被拒绝，请重新申请'
							})
						}
					}
				}
			})
			if (!e) {
				return;
			}
			this.type = parseInt(e.type);
			
			if(e.type == 1){
				uni.setNavigationBarTitle({
					title:'区县代申请'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'社区店申请'
				})
			}
		},
		methods: {
			shengfen(){
				this.showRegion1 = true
				apiGetAreaList().then(res=>{
					console.log(res);
					this.columns1 = res.list
				})
			},
			shiqu(){
				this.showRegion2 = true
			},
			changeEconomize(e){
				this.region1 = this.columns1[e[0]]
				this.data.province_id = this.region1.id
				apiGetAreaList({
					pid:this.region1.id
				}).then(res=>{
					console.log(res);
					this.columns2 = res.list
				})
			},
			changeMarket(e){
				this.region2 = this.columns2[e[0]]
				this.data.city_id = this.region2.id
				apiGetAreaList({
					pid:this.region2.id
				}).then(res=>{
					console.log(res);
					this.columns3 = res.list
				})
			},
			changeDistinguish(e){
				this.region3 = this.columns3[e[0]]
				this.data.district_id = this.region3.id
				apiGetAreaList({
					pid:this.region3.id
				}).then(res=>{
					console.log(res);
					this.columns4 = res.list
				})
			},
			
			
			// 地区选择，选择当前省市区的ID
			regionChange(region) {
				this.data.region = region.province.label + region.city.label + region.area.label;
				this.data.province_id = region.province.value;
				this.data.city_id = region.city.value;
				this.data.district_id = region.area.value;
			},
			shenfenz(type) {
				var self = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						self.uploadImage(res.tempFilePaths[0]).then(r => {
							if (type == 1) {
								self.data.idcard_just = r.url;
							} else if (type == 2) {
								self.data.idcard_back = r.url;
							} else {
								self.data.business_license = r.url;
							}

						})
						if (type == 1) {
							self.sfz_z = res.tempFilePaths[0];
						} else if (type == 2) {
							self.sfz_f = res.tempFilePaths[0];
						} else {
							self.zz = res.tempFilePaths[0];
						}
					}
				});
			},
			
			uploadImage(path) {
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				})
				return new Promise((resolve, reject) => {
					uploadFile(path)
						.then((res) => {
							resolve(res)
							uni.hideLoading()
						})
						.catch(() => {
							uni.hideLoading()
							reject()
						})
				})
			},
			
			zhizhao() {

			},
			submit() {
				let param = {};
				param.type = this.type;
				if (this.type == 1) {
					param.phone = this.data.phone;
					param.province_id = this.data.province_id;
					param.city_id = this.data.city_id;
					param.district_id = this.data.district_id;
					param.business_license = this.data.business_license;
					param.idcard_just = this.data.idcard_just;
					param.idcard_back = this.data.idcard_back;
				} else {
					param.name = this.data.name;
					param.phone = this.data.phone;
					param.province_id = this.data.province_id;
					param.city_id = this.data.city_id;
					param.district_id = this.data.district_id;
					param.detail_address = this.data.detail_address;
					param.idcard_just = this.data.idcard_just;
					param.idcard_back = this.data.idcard_back;
				}
				param.remark = "申请";
				console.log(8888, param);
				apiDistributionApply1(param).then(res => {
					this.$toast({
						title: '申请成功'
					}, {
						tab: 1,
						url:'/pages/index/index',
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dis-f {
		display: flex;
	}

	.m-0-a {
		margin: 0 auto;
	}

	.lh {
		line-height: 79rpx;
	}

	.hit {
		height: 142rpx !important;
		line-height: 1.7;
		justify-content: space-between;
		padding-right: 20rpx;
	}

	.districtHz {
		width: 673rpx;
		background: #FFFFFF;
		border-radius: 21rpx;
		padding: 18rpx 18rpx;

		.license {
			margin-top: 30rpx;
			justify-content: space-between;

			.f {
				width: 473rpx;
				height: 246rpx;
				border-radius: 20rpx;
				overflow: hidden;
				border: 2rpx dashed #000;
				position: relative;

				image {
					width: 473rpx;
					height: 246rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.z {
				width: 473rpx;
				height: 246rpx;
				border-radius: 20rpx;
				overflow: hidden;
				border: 2rpx dashed #000;
				position: relative;

				image {
					width: 473rpx;
					height: 246rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.bbt {
			border-bottom: 2rpx solid #e5e5e5;
			padding-bottom: 20rpx;
		}

		.he_nr {
			width: 100%;
			height: 79rpx;
			border-bottom: 2rpx solid #e5e5e5;

			display: flex;
			align-items: center;
			padding-left: 10rpx;
			font-size: 25rpx;

			input {
				width: 500rpx;

			}

			.image {
				width: 27rpx;
				height: 36rpx;
			}

			.weiz {
				display: flex;
				align-items: center;
				flex-flow: column;
			}
		}
	}

	.affirm {
		width: 673rpx;
		height: 82rpx;
		background: #FF584D;
		border-radius: 41rpx;
		text-align: center;
		line-height: 82rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 41rpx;
	}
</style>